<template>
	<view class="comp-content">
		<view class="recommend ss-flex ss-row-center">为你推荐</view>
		<view v-if="!state.iconStatus && state.pagination.total > 0"
		  class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
		  <view class="goods-list-box">
		    <view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
		      <s-goods-column class="goods-md-box" size="md" :data="item" :topRadius="10" :bottomRadius="10"
		        @click="sheep.$router.go('/pages/goods/index', { id: item.id })" @getHeight="mountMasonry($event, 'left')" background="#F7F7F7">
		        <template v-slot:cart>
		          <button class="ss-reset-button cart-btn">
					  <uni-icons type="redo-filled"  size="14" color="#4D4D4D"/>
				  </button>
		        </template>
		      </s-goods-column>
		    </view>
		  </view>
		  <view class="goods-list-box">
		    <view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
		      <s-goods-column class="goods-md-box" size="md" :topRadius="10" :bottomRadius="10" :data="item"
		        @click="sheep.$router.go('/pages/goods/index', { id: item.id })" @getHeight="mountMasonry($event, 'right')" background="#F7F7F7">
		        <template v-slot:cart>
		          <button class="ss-reset-button cart-btn">
					  <uni-icons type="redo-filled" size="14" color="#4D4D4D"/>
				  </button>
		        </template>
		      </s-goods-column>
		    </view>
		  </view>
		</view>
		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
		  contentdown: '上拉加载更多',
		}" @tap="loadmore" />
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { reactive, computed, onBeforeUnmount,nextTick } from 'vue'
	import { onLoad, onShow, onHide ,onReachBottom} from '@dcloudio/uni-app';
	import _ from 'lodash';
	const emit = defineEmits(['set'])
	const props = defineProps({
		data:{
			type:Object,
			default:()=>({})
		}
	})

	const state = reactive({
		pagination: {
		  data: [],
		  current_page: 1,
		  total: 1,
		  last_page: 1,
		},
		loadStatus: '',
		leftGoodsList: [],
		rightGoodsList: [],
	})
	// 加载瀑布流
	let count = 0;
	let leftHeight = 0;
	let rightHeight = 0;
	onLoad((opt)=>{
		getList();
	})
	// 上拉加载更多
	onReachBottom(() => {
	  loadmore();
	});
	function mountMasonry(height = 0, where = 'left') {
	  if (where === 'left') {
		leftHeight += height;
	  } else {
		rightHeight += height;
	  }
	  if (!state.pagination.data[count]) return;

	  if (leftHeight <= rightHeight) {
		state.leftGoodsList.push(state.pagination.data[count]);
	  } else {
		state.rightGoodsList.push(state.pagination.data[count]);
	  }
	  count++;
	}
	async function getList(page = 1, list_rows = 6) {
	  state.loadStatus = 'loading';
	  const res = await sheep.$api.goods.list({
	    list_rows,
	    page,
	  });
	  if (res.error === 0) {
	    let couponList = _.concat(state.pagination.data, res.data.data);
	    state.pagination = {
	      ...res.data,
	      data: couponList,
	    };
	    mountMasonry();
	    if (state.pagination.current_page < state.pagination.last_page) {
	      state.loadStatus = 'more';
	    } else {
	      state.loadStatus = 'noMore';
	    }
	  }
	}
	// 加载更多
	function loadmore() {
	  if (state.loadStatus !== 'noMore') {
	    getList(
	      state.pagination.current_page + 1,
	    );
	  }
	}
</script>

<style lang="scss" scoped>
	.comp-content{
		background: #fff;
		.recommend{
			height: 120rpx;
			font-family: Source Han Sans;
			font-size: 32rpx;
			font-weight: 500;
			line-height: 132.75%;
			letter-spacing: normal;
			color: #1A1A1A;
		}
		.goods-list-box {
		  width: 50%;
		  box-sizing: border-box;
		
		  .left-list {
		    margin-right: 10rpx;
		    margin-bottom: 20rpx;
		  }
		
		  .right-list {
		    margin-left: 10rpx;
		    margin-bottom: 20rpx;
		  }
		}
	}
	.cart-btn{
		width: 34rpx;
		margin-left: 8rpx;
		min-width: 34rpx;
		height: 34rpx;
		background: #D8D8D8;
		border-radius: 50%;
	}
</style>